<!DOCTYPE HTML>
<html>
<head>
<title>Preface a Personal Category Flat Bootstrap Responsive Website Template| Home :: w3layouts</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
 <!-- Custom Theme files -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!-- <meta name="keywords" content="Preface Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" /> -->
<!-- webfonts -->
	<!-- <link href='//fonts.googleapis.com/css?family=Asap:400,700,400italic' rel='stylesheet' type='text/css'>
	<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'> -->
<!-- webfonts -->
 <!-- start-smoth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
 <!--start-smoth-scrolling-->
</head>
	<body>
		<!-- container -->
			<!-- header -->
			<div id="home" class="header">
				<div class="container">
				<!-- top-hedader -->
				<div class="top-header">
					<!-- /logo -->
					<!--top-nav-->
					<div class="top-nav">
					<div class="navigation">
					<div class="logo">
						<h1><a href="index.html"><span>司</span>文娟</a></h1>
					</div>
					<div class="navigation-right">
						<span class="menu"><img src="images/menu.png" alt=" " /></span>
						<nav class="link-effect-3" id="link-effect-3">
							<ul class="nav1 nav nav-wil">
								<li class="active"><a  href="index.html">个人简历</a></li>
								<li><a class="scroll"  href="#about">个人技能</a></li>
								<li><a class="scroll"  href="#services" >项目展示</a></li>
								<li><a class="scroll"  href="#work">工作经历</a></li>
								<li><a class="scroll"  href="#port">个人爱好</a></li>
								<!--<li><a class="scroll" data-hover="Blog" href="#blogs">Blog</a></li>
								<li><a class="scroll" data-hover="Contact" href="#contact">Contact</a></li>-->
							</ul>
						</nav>
							<!-- script-for-menu -->
								<script>
								   $( "span.menu" ).click(function() {
									 $( "ul.nav1" ).slideToggle( 300, function() {
									 // Animation complete.
									  });
									 });
								</script>
							<!-- /script-for-menu -->
					</div>
					<div class="clearfix"></div>
				</div>
				<!-- /top-hedader -->
				</div>
			<div class="banner-info">
				<div class="col-md-7 header-right">
					<h1>Hi !</h1>
					<h6>前端工程师 & H5开发工程师</h6>
					<ul class="address">
					
					<li>
							<ul class="address-text">
								<li><b>姓名</b></li>
								<li>司文娟</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>邮箱</b></li>
								<li>siwenMail@163.com</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>电话 </b></li>
								<li>188 4898 0105</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>地址 </b></li>
								<li>中国 上海 闸北区</li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="col-md-5 header-left">
					<img src="images\87339972880987214.jpg" alt="">
				</div>
				<div class="clearfix"> </div>
						
		      </div>
			</div>
		</div>
	</div>
<!-- about -->
<div id="about" class="about">
	<div class="col-md-12 about-left">
		<div id="owl-demo1" class="owl-carousel owl-carousel2">
		                <div class="item">
		                	<div class="about-left-grid">
								<h2>Hi! 我是 <span>司文娟</span></h2>
								<p>1哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<p>2哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<p>3哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<ul>
									<li><a class="a-btn-a scroll" href="#port">My Work</a></li>
									<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li>
								</ul>
							</div>
		                </div>
		                  <div class="item">
		                	<div class="about-left-grid">
								<h2>Hi! I'm <span>Rob Lee</span></h2>
								<p>4哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<p>5哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<p>6哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<ul>
									<li><a class="a-btn-a scroll" href="#port">My Work</a></li>
									<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li>
								</ul>
							</div>
		                </div>
		                  <div class="item">
		                	<div class="about-left-grid">
								<h2>Hi! I'm <span>ROB LEE</span></h2>
								<p>7哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<p>8哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<p>9哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
								<ul>
									<li><a class="a-btn-a scroll" href="#port">My Work</a></li>
									<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li>
								</ul>
							</div>
		                </div>
		</div>
	</div>
	<!--<div class="col-md-6 about-right">
		
	</div>-->
	<div class="clearfix"> </div>
				<link href="css/owl.carousel.css" rel="stylesheet">
				    <script src="js/owl.carousel.js"></script>
<script>
	$(document).ready(function() {
		$("#owl-demo1").owlCarousel({
			items : 1,
			lazyLoad : false,
			autoPlay : true,
			navigation : false,
			navigationText :  false,
			pagination : true,
		});
	});
</script>
<!-- Feedback -->
<script>
	$(document).ready(function() {
		$("#owl-demo3").owlCarousel({
			items : 1,
			lazyLoad : false,
			autoPlay : true,
			navigation : false,
			navigationText :  true,
			pagination :true,
		});
	});
</script>
</div>
<!-- /about -->
<!--work-experience-->
<div id="work" class="work">
		<div class="container">
			<div class="service-head text-center">
						<h3> <span>工作经历</span></h3>
						<span class="border one"></span>
					</div>
					<div class="time-main w3l-agile">
							<div class="col-md-6 year-info">
							   <ul class="year">
								   <li>2016.11--至今</li>
								   <li>2014.6--2016.11</li>
								   <div class="clearfix"></div>
								</ul>
							</div> 
				<ul class="col-md-6 timeline">
									<li>
										<div class="timeline-badge info"><i class="glyphicon glyphicon-briefcase"></i></div>
										<div class="timeline-panel">
										<div class="timeline-heading">
											<h4 class="timeline-title">游大大国际旅行社</h4>
										</div>
										<ul class="timeline-body">
											<li><span>担任职务</span>H5前端工程师</li>
											<li>
												<span>工作内容</span>
												<div>
													<p>1.游大大商旅,游大大旅游两款APP部门模块的UI实现</p>
													<p>2.使用post请求进行前后端交互</p>
													<p>3.与原生APP进行交互,混合开发</p>
													<p>4.负责产品BUG的排查、定位、修复等维护工作</p>
													<p>5.新功能版本迭代等研发维护工作</p>
												</div>
											</li>
										</ul>
										</div>
									</li>
									
									<li>
										<div class="timeline-badge primary"><i class="glyphicon glyphicon-briefcase"></i></div>
										<div class="timeline-panel">
										<div class="timeline-heading">
											<h4 class="timeline-title">郑州软银科技</h4>
										</div>
										<ul class="timeline-body">
											<li><span>担任职务</span>H5前端工程师</li>
											<li>
												<span>工作内容</span>
												<div>
													<p>1.游大大商旅,游大大旅游两款APP部门模块的UI实现</p>
													<p>2.使用post请求进行前后端交互</p>
													<p>3.与原生APP进行交互,混合开发</p>
													<p>4.负责产品BUG的排查、定位、修复等维护工作</p>
													<p>5.新功能版本迭代等研发维护工作</p>
												</div>
											</li>
										</ul>
										</div>
									</li>
								</ul>
								<div class="clearfix"></div>
								</div>
						</div>
				</div>
<!--//work-experience-->
		
<!-- 项目展示 -->
<div class="blog" id="blogs">
	<div class="container">
		<div class="service-head text-center">
		<h4>Project</h4>
		<h3>我的 <span>项目展示</span></h3>
		<span class="border one"></span>
	</div>
	 <div class="news-grid w3l-agile">
		    <div class="col-md-6 news-img">
			  <a href="#" data-toggle="modal" data-target="#myModal1" class="clearfix" > 
				  <img  src="images/app.jpg" alt=" " class="img-responsive">
				  <img  src="images/sv.jpg" alt="">
			  </a>
			</div>
		    <div class="col-md-6 news-text">
			   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">React项目展示</a></h3>
				<p>混合开发的两款旅游类APP,H5部分采用了React + sass + ES6的前端框架,构建工具使用的是Webpack + gulp</p>
				<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a>
		
			</div>
			<div class="clearfix"></div>
	 </div>
	 <div class="news-grid">
		    <div class="col-md-6 news-text two">
			   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">全民共进</a></h3>
				<p>众筹类网站</p>
					<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a>
			</div>
			<div class="col-md-6 news-img two">
			   <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b2.jpg" alt=" " class="img-responsive"></a>
			 
			</div>
			<div class="clearfix"></div>
	 </div>
	 <div class="news-grid">
		    <div class="col-md-6 news-img">
			  <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b3.jpg" alt=" " class="img-responsive"></a>
			 
			</div>
		    <div class="col-md-6 news-text">
			   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">手机端促销项目</a></h3>
				<p>商超促销页面,活动页面等</p>
				<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a>
		
			</div>

			<div class="clearfix"></div>
	 </div>
	</div>
</div>
<!-- 项目展示 -->
<!-- /项目详情-->
		<div class="modal ab fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog about" role="document">
				<div class="modal-content about">
					<div class="modal-header">
						<button type="button" class="close ab" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
					</div>
					<div class="modal-body about">
							<div class="about">
								
								  <div class="about-inner">
								   
								      <img src="images/b3.jpg" alt="about"/>
									     <h4 class="tittle">A Fews words about us</h4>
									   <p>Lorem ipsum dolor sit amet Integer gravida,Lorem ipsum dolor sit amet Integer gravida velit,Ming sits in the corner the whole day. She's into crochet. quis dolor tristiqumsan.Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. velit quis dolor tristiqumsan.</p>
									    <p>Lorem ipsum dolor sit amet. Integer gravida velit quis dolor tristiqumsan.anteposuerit litterarum formas humanitatis per seacula amet Integer gravida velit. </p>
								  </div>
							</div>
					</div>
				</div>
			</div>
		</div>
<!-- //项目详情pop-->

<!-- /header -->
<div class="footer" id="contact">
	
</div>
<!-- //footer -->
<a href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<!--start-smooth-scrolling-->
<script type="text/javascript">
	$(document).ready(function() {
		$().UItoTop({ easingType: 'easeOutQuart' });
	});
</script>
								<!--end-smooth-scrolling-->
<!-- //for bootstrap working -->
	<script src="js/bootstrap.js"></script>
	

	</body>
</html>

